<template>
	<view style="height: 100%;">
		<view class="centent">
			<view class="navtopbox">
				<view class="navtopboxcenter">
					<scroll-view scroll-y="true" style="height:100% ;" :refresher-enabled='refresherEnabled'
						:refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
						@refresherrestore="onRestore" @refresherabort="onAbort">
						<view class="navlist" @tap="toclassggxiangqing(item.message_id)" v-for="(item,index) in gglist"
							:key="index" v-if="gglist.length>0">
							<view class="title">
								<text>【</text>
								<text>{{item.message_title}}</text>
								<text>】</text>
							</view>
							<view class="jianyao">
								<text v-if="item.desc">{{item.desc}}</text>
							</view>
							<view class="time">
								<text>{{item.createtime}}</text>
							</view>
							<view class="tojiantou">
								<image src="../../static/jiantou.png" mode=""></image>
							</view>
						</view>
						<kongyemian v-if="gglist.length<1 || (!gglist)" :isLoding="loding"></kongyemian>
					</scroll-view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				gglist: [],
				loding: true,
				index: {
					type: Number
				},
				class_id: {
					type: Number
				},
				// 开启下拉
				refresherEnabled: true,
				//
				triggered: false,
				company_id:0
			}
		},
		methods: {

			toclassggxiangqing(id) {
				this.$store
					.dispatch('jiazhangxiangqing', {
						token: this.userInfo.token,
						id: id,
						class_id: this.class_id,
						openid: this.userInfo.openid,
						index: uni.getStorageSync("def")
						
					})
					.then(res => {

						if (res.data.code == 0) {


							setTimeout(() => {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							}, 1000)
							this.jiazhangzhushoulist()

						} else {
							uni.navigateTo({
								url: '../jiazhangzhushouxiangqing/jiazhangzhushouxiangqing?id=' + id +
									'&class_id=' + this.class_id
							})
						}

					});

			},
			jiazhangzhushoulist() {
				this.loding = true
				this.$store
					.dispatch('jiazhangzhushoulist', {
						token: this.userInfo.token,
						openid: this.userInfo.openid,
						index: this.index,
						class_id: this.class_id,
						company_id : this.company_id


					})
					.then(res => {
						this.gglist = res.data.data;
						this.loding = false
					});
			},
			//下拉过程的函数
			onPulling(e) {
				
			},
			//松手后执行下拉事件的函数
			onRefresh() {
				if (this._freshing) return;
				this.triggered = 'restore';
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)
				//获取数据的函数
				this.jiazhangzhushoulist()
			},
			//开始结束下拉的函数
			onRestore() {
				this.triggered = 'restore'; // 关闭动画
			},
			//结束下拉函数
			onAbort() {}


		},
		onLoad(data) {
			this.class_id = data.class_id
			this.company_id = data.company_id
			this.index = uni.getStorageSync("def")
			if (this.index == 0) { //家长端显示的导航栏标题

				uni.setNavigationBarTitle({
					title: "家长助手"
				})
			} else if (this.index == 1) { //教师端显示的导航栏标题
				uni.setNavigationBarTitle({
					title: "教师助手"
				})
			} else if (this.index == 2){
				uni.setNavigationBarTitle({
					title: "消息中心"
				})
			}

			this.jiazhangzhushoulist()
		},
		// onPullDownRefresh() {
		// 	this.jiazhangzhushoulist()
		// 	setTimeout(() => {
		// 		uni.stopPullDownRefresh();
		// 	}, 1500)
		// }
	}
</script>

<style lang="less">
	page {
		height: 100%;
		background-color: #f4f4f4;
		box-sizing: border-box;

	}

	::-webkit-scrollbar {
		width: 0px;
		height: 0px;
		color: transparent;
	}

	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;

		.navtopbox {
			width: 100%;
			height: 100%;
			// background-color: #222222;
			padding: 20rpx;
			box-sizing: border-box;

			.navtopboxcenter {
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				border-radius: 15rpx;
				overflow: hidden;

				.navlist {
					position: relative;
					width: 100%;
					min-height: 200rpx;
					border-bottom: 2rpx solid #ccc;
					padding: 20rpx 40rpx 20rpx 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.title {
						font-size: 32rpx;
						font-weight: bold;

					}

					.jianyao {
						font-size: 24rpx;

					}


					.time {
						font-size: 24rpx;
						color: #999999;
					}

					.tojiantou {
						position: absolute;
						right: 13rpx;

						image {
							width: 27rpx;
							height: 45rpx;
						}
					}
				}
			}
		}


	}
</style>
